🚀🚀Angular 16 Signal in Action With Reactivity🚀🚀

What is Angular Signal?

. Angular introduced a Signal as developer preview in angular 16 Before getting into Angular Signal , Angular works in away of change detection.

what is Change detection and zone js role in angular?

🌊: Zone.js detects when something happens in the application.

🌊: Zone.js triggers change detection to update the application state.

When change detection starts 🔥, the framework goes through all the components in the tree to verify if their state has changed or not and if the new state affects the view. If that’s the case, the DOM part of the component which is affected by the change is updated.

This functionality have a significant impact on the performance of the application,

Change Detection is How Angular Updates the UI when the state and app changes.This could be some user interaction or some new data changes in the app.

Why Angular Signal?

What is Reactivity?

Making Something happen when there is a Change is Called Reactivity.

🚀🚀Rethinking Reactivity in Angular.🚀🚀

Better Reactivity Means : Fine grained control of updates

Angular Signals:

Using signals gives us finer control over change detection, which can improve performance. More Scalable , better performance applications.

✅Signals provide more reactivity.

✅Signal Foundation:

'

3 Core Concepts and Angular Reactive Primitives:

signals, computed ,effects.

1️⃣signals:

🔸signals is like a variable that hold a value.It could notify angular when they changes.

*🔸A signal is synchronous.

*️⃣ Where can we use signals?

✅Use them in components to track local component state

✅Use them in directives

✅Use them in a service to share state across components

✅Read them in a template to display signal values

✅Or use them anywhere else in your code

How to create a Signal:

✅set(): The easiest way to update a Signal is the set() method. Nice and easy for basic data types such as strings or booleans:

✅update: When the new value of a Signal depends on its previous value, update() is the best method to use.

This is the ideal method for a counter, for instance:

keyNote:As of v17, signal don't support mutations anymore.

✅ Mutate : used to update complex objects.

🔸The mutate() method modifies the content of a signal value, not the signal value itself.

🔸 Use it with arrays to modify array elements, and objects to modify object properties.

Key Difference between update and mutate:

💼update : update returns the updated value

💼 mutate: while mutate modifies the object itself:

2️⃣Computed :

computed is a kind of signals when calculate the value from other signals.only updates if they value depends on changes.

3️⃣Effects:

Effects are functions that execute when the values of the signals they use changes.

Why should we use signal inputs and not @Input()?

Signal inputs are a reactive alternative to decorator-based @Input().

In comparison to decorator-based @Input, signal inputs provide numerous benefits: Signal inputs are more type safe:

🔸 Required inputs do not require initial values, or tricks to tell TypeScript that an input always has a value.

🔸Transforms are automatically checked to match the accepted input values.

🔸Signal inputs, when used in templates, will automatically mark OnPush components as dirty.

🔸Values can be easily derived whenever an input changes using computed.

🔸Easier and more local monitoring of inputs using effect instead of ngOnChanges or setters.